<template>
  <div class="line-gadget-css">
    <Portal to="right-disable"
            v-loading="loading"
            :disabled="!queryModelDefaultSetting.showSetting">
      <el-card shadow="never"
               :style="{height: gadgetHeight + 'px',border:0}"
               class="aui-card--fill">
        <div style="width:100%;height:100%;">
          <div class='control-section'>
              <user-gadget ref="attendance-user"
                                       class="attendance-user"></user-gadget>
            </div>
          </div>
      </el-card>

    </Portal>
    <model :showSetting='queryModelDefaultSetting.showSetting'
           @queryModelClosed='queryModelClosed'
           :dataInfo='queryModelDefaultSetting.dataInfo'
           :updateGadget="upgradeGadgetSetting"
           :slicer='slicer' />

  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import { defaultGadgetSettingList } from '@/utils/data-json'
import userGadget from './AttendanceUser.vue'
import moment from 'moment'
export default ({
  mixins: [mixinGadgetViewModule],
  components: { userGadget, model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      currentTime: null,
      queryData: [],
      queryFields: [],
      gadgetSetting: null,
      loading: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'usergadget',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'usergadget' }).gadgetSetting
        }
      },
      queryId: '',
      queryDrillthrough: {},
      widgetName: '',
      linkedDatasetList: [],
      syncNowTime: null,
      timeId: null
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 45
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
    this.timeId = setInterval(() => {
      this.syncNowTime = moment(new Date()).format('HH:mm:ss MM/DD')
    }, 1000)
  },
  beforeDestroy () {
    if (this.timeId) {
      clearInterval(this.timeId)
    }
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 45
      this.gadgetWidth = newWPx
    },
    initSheetAndUserList () {
      this.$refs['time-sheet'].getUserChangeRecord()
      this.$refs['user-list'].getUserLists()
    },
    query () {
      this.gadgetSetting = this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      this.loading = true
      var _self = this
      var obj = JSON.parse(JSON.stringify(this.slicer))
      for (var key in obj) {
        if (key === 'id') {
          delete obj.id
        }
      }
      var param = {
        ...obj,
        slicer: { ...this.slicer },
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr(),
        type: this.filterType,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName
      }
      this.$interface.reports.getReportDataInfo(param)
        .then(({ data: res }) => {
          _self.currentTime = new Date()
          _self.verifyHasData(res)
          if (res.config) {
            _self.gadgetSetting = _self._.merge(_self.gadgetSetting, res.config)
          }
          if (!_self.gadgetSetting.headerDescription || _self.gadgetSetting.headerDescription === null) {
            _self.gadgetSetting.headerDescription = ''
          }
          let objList = res.selectFields.find(item => { return item.dataType === 'dimension' })
          _self.queryDrillthrough = objList || {}
          _self.queryId = _self.queryDrillthrough ? _self.queryDrillthrough.queryId : ''
          if (res.name) {
            _self.widgetName = res.name
          } else {
            _self.widgetName = _self.gadgetSetting.headerTitle
          }
          if (res.data) {
            _self.queryData = res.data
            _self.queryFields = res.selectFields
            _self.linkedDatasetList = res.datasetSync
            this.initSheetAndUserList()
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    }
  }

})
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 0px !important;
}

.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

.threepoints {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 9px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.cardHeader > span {
  display: inline-block;
  width: calc(100% - 30px);
}

.cardTitle {
  color: #000;
  font-weight: 700;
  display: inline-block;
  max-width: calc(100% - 30px);
  position: relative;
  top: 2px;
}

.cardIcon {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  position: relative;
  top: -2px;
}
</style>
<style lang="scss">
.line-gadget-css {
  .el-card__body {
    width: 100%;
    height: 100%;
  }
  .control-section2 {
    width: 100%;
    height: calc(100% - 34px);
  }
}
.page-content-area {
  // height: calc(100vh - 50px - 38px - 30px - 40px - 15px - 42px);
  height: calc(100% - 55px);
  width: 100%;
  display: flex;
  justify-content: space-between;
  .time-sheet {
    // width: calc(25% - 10px);
    // height: calc(100vh - 50px - 38px - 30px - 40px - 15px - 42px);
    height: 100%;
  }
  .user-status {
    // width: calc(75% - 10px);
    // height: calc(100vh - 50px - 38px - 30px - 40px - 15px - 42px);
    height: 100%;
  }
}
.timer {
  position: absolute;
  left: 0;
  top: 0;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  font-size: 26px;
  font-weight: bold;
}

</style>
